<template>
    <div class="lw-checkbox">
        <label>
            <!-- 
                emit => setup函数中的emit()函数
                $emit()   => 当前组件中存储的代理对象(ctx) => 中的$emit / $forceUpdate

             -->
            <input hidden type="checkbox" :checked="props.checked" @change="emit('update:checked',$event.target.checked)">
            <span class="iconfont">√</span>
            <i class="content">{{label}}</i>
        </label>
    </div>
</template>

<script setup>
    // 定义组件的相关配置项
    defineOptions({
        name:"LwCheckBox",
        inheritAttrs:true,  // 禁用继承
    })


    // 接收props属性  =>默认返回响应式代理
    // defineProps(["checked","label"]);
    let props = defineProps({ 
        checked: {
            type: Boolean,
            default: false,
        },
        label: {
            type: String,
            default: "",
        }
    });
    console.log("props",props);

    // 接收自定义事件  => 返回emit()函数 => 可以触发自定义事件(可以在setup函数/template中使用,template中也可以使用 $emit())
    let emit = defineEmits(["update:checked"]);


</script>

<style lang="scss" scoped>
    .lw-checkbox {
        user-select: none;
        display: inline-block;
    }

    .lw-checkbox label span {
        display: inline-block;
        vertical-align: middle;
        width: 20px;
        height: 20px;
        border-radius: 2px;
        border: 1px solid #757575;
        color: #fff;
        text-align: center;
        line-height: 20px;

    }

    .lw-checkbox label span:hover {
        color: #757575;
    }

    /* 当checkbox处于选中状态 span的样式 */
    .lw-checkbox label input[type='checkbox']:checked+span {
        background-color: #ff6700;
        border-color: #ff6700;
        color: #fff;
    }

    .content {
        font-style: normal;
    }
</style>